<template>
    <div class="list">
        <page-title :title="title"></page-title>
        <!-- 列表 -->
        <div class="list-wrap">
            <div id="wrap">
                <vue-better-scroll class="user-trace" slot="list" ref="scroll" :scrollbar="scrollbarObj" :pullDownRefresh="pullDownRefreshObj" :pullUpLoad="pullUpLoadObj" :startY="parseInt(startY)" @pullingDown="onPullingDown" @pullingUp="onPullingUp">
                    <swiper v-if="swiperdata && swiperdata.length>0" :aspect-ratio="1/2" loop class="ls-swiper" ref="lsswiper">
                        <swiper-item class="ls-swiper-item" v-for="(item, index) in swiperdata" :key="index">
                            <a :href="item.cross_link?item.cross_link:genSpreadLink(item.id)">
                                <img :src="item.focus_img">
                                <div class="title">
                                    <h4>{{item.name}}</h4>
                                </div>
                            </a>
                        </swiper-item>
                    </swiper>
                    <ul>
                        <li v-if="page.list.length>0" class="ls-box" v-for="item in page.list" :key="item.id">
                            <a :href="item.cross_link?item.cross_link:genSpreadLink(item.id)">
                                <div class="ls-l"><img :src="item.thumburl+'?imageMogr2/interlace/1/thumbnail/!200x150r/crop/200x150'" @error="errImg"></div>
                                <div class="ls-r">
                                    <h4 class="title">{{item.name}}</h4>
                                    <span class="time">{{item.release_time}}</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </vue-better-scroll>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import VueBetterScroll from '@/components/Loadpullup'
import draggable from 'vuedraggable'
import { XDialog, TransferDomDirective as TransferDom, Swiper, SwiperItem, Scroller, Loading, Divider } from 'vux'
import { findSpreadListPage, findFocusSpreadList } from '@/api/spread.js'
import { getEnterpriseInfo } from "@/api/enterprise";

// import InfiniteLoading from 'vue-infinite-loading';
export default {
    data() {
        return {
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: {
                threshold: 90,
                stop: 40
            },
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '<img class="scroll-loading" src="">',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0,  // 纵轴方向初始化位置
            scrollToX: 0,
            scrollToY: 0,
            scrollToTime: 700,
            maxHeight: null,
            enterprise: null,
            //微信菜单配置传过来的参数
            params: this.$route.query.params,
            title: this.$route.query.title,

            page: {
                totalRow: null,
                pageNumber: 1,
                pageSize: 10,
                lastPage: false,
                list: [],
            },
            swiperdata: [],
            onFetching: false,
            list: [],
            // 当前选中的标签ID，0表示全部
            choseTagsId: 0,
        }
    },
    directives: {
        TransferDom
    },
    components: {
        draggable,
        XDialog,
        Swiper,
        SwiperItem,
        Loading,
        Divider,
        VueBetterScroll
    },
    methods: {
        // 动态生成传播详情链接
        genSpreadLink(id) {
            let url = process.env.HOST_WECHAT_WEB + '/?wxsb=' + +new Date() + '#/spread?id=' + id
                + '&eid=' + this.$route.query.eid + '&waid=' + this.$route.query.waid
            if (this.$route.query.wwuid) {
                url += '&wwuid=' + this.$route.query.wwuid
            }
            if (this.$route.query.shareUserId) {
                url += '&shareUserId=' + this.$route.query.shareUserId
            }
            return url
        },
        // 列表数据请求
        findSpreadListPageMethods(pageNumber, pageSize, params, tagsId) {
            if (!this.onFetching) {
                this.onFetching = true
                findSpreadListPage(pageNumber, pageSize, params, tagsId).then(resp => {
                    this.page = resp.page
                    if (this.page.pageNumber < this.page.totalPage) {
                        this.$refs.scroll.forceUpdate(true)
                    } else {
                        this.$refs.scroll.forceUpdate(false)
                    }
                    this.onFetching = false
                })
            }
        },
        onPullingDown() {
            // 模拟下拉刷新
            this.findSpreadListPageMethods(1, 10, this.params, this.choseTagsId)
        },
        onPullingUp() {
            // 模拟上拉 加载更多数据
            findSpreadListPage(this.page.pageNumber + 1, this.page.pageSize, this.params, this.choseTagsId).then(resp => {
                this.page.pageNumber = resp.page.pageNumber
                this.page.list = this.page.list.concat(resp.page.list)
                if (this.page.pageNumber < this.page.totalPage) {
                    this.$refs.scroll.forceUpdate(true)
                } else {
                    this.$refs.scroll.forceUpdate(false)
                }
            })
        },
        async errImg(event) {
            if (!this.enterprise) {
                await getEnterpriseInfo().then(resp => {
                    this.enterprise = resp.enterprise
                })
            }
            var img = event.srcElement;
            img.src = this.enterprise.logo_4x3;
            //控制不要一直跳动
            img.onerror = null;
        }
    },

    mounted() {
        findFocusSpreadList(this.params).then(res => {
            this.swiperdata = res.list
        }).catch(_ => { })
        this.findSpreadListPageMethods(this.page.pageNumber, this.page.pageSize, this.params, this.choseTagsId)
    },
    created() {
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list {
    position: relative;
    height: calc(100vh - 2rem);
}
.isChosedTags {
    color: #2196f3;
}
</style>
